<template>
<uni-shadow-root class="partials-coupons-coupons"><block v-if="data.androidTemplate == ''">
  
  <block v-if="data.relateBean.length!=0">
   <scroll-view class="recommend_scroll_x_box" scroll-x="true">
   <block v-for="(item,index) in (data.relateBean)" :key="item.index">
        <view class="recommend_hot_box" :style="'background-color:'+(color[index])+';'" @click="click" :data-id="item.id" :data-index="index">
          <view class="CouponsText">
            <view class="name"><text>{{item.name}}</text></view>
            <view class="youhuiAmount"><text>￥{{item.youhuiAmount}}</text></view>
            <view class="remark"><text>{{item.remark}}</text></view>
          </view>
          <view class="CouponsImg" :style="'background-color:'+(color[index])+';'"></view>
          <view class="choose" v-if="color[index]!='#FE3D53'">
              <image src="https://image1.sansancloud.com/xianhua/2019_12/17/13/40/51_347.jpg?x-oss-process=style/preview_120" class="recommend_hot_image"></image>
          </view>
        </view>
         <view class="recommend_hot_box" :style="'background-color:'+(color[0])+';'" @click="clickLink" v-if="index==data.relateBean.length-1">
          <view class="moreCouponsText">
            <view class="youhuiAmount1"><text>更多好卷 </text></view>
          </view>
          <view class="CouponsImg" style="background-color:#FE3D53;"></view>
        </view>
       </block> 
      </scroll-view>
  </block>
  <block v-if="data.relateBean.length==0">
      <view class="noproduct">
        <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120"></image>
        <text>没有相关的优惠卷</text>
      </view>
  </block>
</block> 

<block v-if="data.androidTemplate == 'second_coupons_with_boxshadow'">
  
  <block v-if="data.relateBean.length!=0">
  <scroll-view class="coupons_wrapp" scroll-x="true">
  <block v-for="(item,index) in (data.relateBean)" :key="item.index">
      <view class="coupons_box" @click="click" :data-id="item.id" :data-index="index" :style="'border: 1px solid '+(defaultColor)+'; border-left:none;'">
           <view class="circle" :style="'border: 2px solid '+(defaultColor)+';'"></view>
           <view class="xian" :style="'background-color: '+(defaultColor)+';'"></view>
           <view class="xian1" :style="'background-color: '+(defaultColor)+';'"></view> 
           <view class="select" :style="'  background-color: '+(defaultColor)+';'">
              <view class="selectText">立即领取</view>
           </view> 
      </view>
  </block>
  <view class="coupons_box1" @click="clickLink" :style="' border: 1px solid '+(defaultColor)+'; '">
    <view class="coupons_box1_text">
      <text>更多好卷</text>
    </view>
  </view>
  </scroll-view>
  </block>
  <block v-if="data.relateBean.length==0">
      <view class="noproduct">
        <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120"></image>
        <text>没有相关的优惠卷</text>
      </view> 
  </block>
</block></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'partials/coupons/coupons'
const app = getApp();
Component({
  properties: {
    data: {
      type: JSON,
      value: '',
    }
  },
  data: {
    someData: {},
    color: ["#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53", "#FE3D53"]
  },
  ready:function(){
    let that=this;
    app.globalData.consoleFun("=====coupons组件-data=====",[that.data.data])
    if (app.globalData.setting.platformSetting.defaultColor && app.globalData.setting.platformSetting.defaultColor != "") {
      app.globalData.consoleFun("=====coupons组件-defaultColor=====",[app.globalData.setting.platformSetting.defaultColor])
      // 有默认色
      this.setData({
        defaultColor: app.globalData.setting.platformSetting.defaultColor
      })
    }
    else {
      // 没有默认色
      this.setData({
        defaultColor: app.globalData.setting.platformSetting.defaultColor
      })
    }
  },
  methods: {
    //领取优惠券
    click: function (e) {
      console.log(e)
      var i = e.currentTarget.dataset.index
      var data = {
        couponId: '',
        couponSecretCode: '',
        couponSecretPassword: ''
      }
      data.couponId = e.currentTarget.dataset.id
      app.globalData.consoleFun("=====coupons组件-data=====",[data])
      var that = this
      var customIndex = app.globalData.AddClientUrl("/gain_coupon.html", data, 'post')
      console.log("A" + app.globalData.headerPost)
      wx.request({
        url: customIndex.url,
        header: app.globalData.headerPost,
        data: customIndex.params,
        method: 'POST',
        success: function (res) {
         app.globalData.consoleFun("=====coupons组件-success=====",[res])
          // 能领取
          if (res.data.id && res.data.id > 0) {
            if (res.data.newGot == 0 && res.data.otherGot == 0){
              wx.showToast({
                title: '你已经领过了',
                icon: 'success',
                duration: 1000
              })
              var color = that.data.color;
              color[i] = "#E7E7E7"
                  that.setData({ color: color })
            }
            else if (res.data.otherGot == 1) {
              wx.showToast({
                title: '已被别人领取',
                icon: 'success',
                duration: 1000
              })
              var color = that.data.color;
              color[i] = "#E7E7E7"
              that.setData({ color: color })
            }
            else if (res.data.newGot == 0) {
              wx.showToast({
                title: '领取成功',
                icon: 'success',
                duration: 1000
              })
              var color = that.data.color;
              color[i] = "#E7E7E7"
              that.setData({ color: color })
            }
          }
          // 不能领取
          else if (res.data.errcode && res.data.errcode == 0) {
            res = res.relateBean
          }
          else if (res.data.errcode && res.data.errcode != 0) {
            wx.showToast({
              title: res.data.errMsg,
              icon: 'none',
              duration: 1000
            })
          }
        },
        fail: function (res) {
          wx.hideLoading()
          app.globalData.loadFail()
        }
      })
    },
    // 点击更多卷
    clickLink: function () {
      wx.navigateTo({
        url: '../../pages/available_coupons/index',
      })
    },
  },
})
export default global['__wxComponents']['partials/coupons/coupons']
</script>
<style platform="mp-weixin">
@import 'second_coupons_with_boxshadow/second_coupons_with_boxshadow.css';/* 引入第二种优惠卷样式 */
.recommend_scroll_x_box {
  height: 200rpx;
  white-space: nowrap;
  display: flex;
}
.CouponsText text{
  color: white;
}
.recommend_hot_box {
  width: 250rpx;
  height: 195rpx;
  margin-left: 24rpx;
  display: inline-block; 
  background-color: #FE3D53; 
  text-align: center;
  position: relative;
}
.name{
  height: 50rpx;
}
.name text{
  display: block;
  font-size: 30rpx;
  line-height: 50rpx;
}
.youhuiAmount{
    height: 85rpx;
}
.youhuiAmount text{
  font-size: 60rpx;
}
.remark{
  height: 45rpx;
}
.remark text{
  display: block;
  font-size: 30rpx;
  line-height: 45rpx;
}
.CouponsImg {
  width: 250rpx;
  height: 20rpx;
  background-image: url(http://asset.sansancloud.com/static/shangcheng/images/dot.png);
}
.choose{
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  right: 0;
  top: 0;
}
.choose image{
  width: 100%;
  height: 100%;
}
/*没有相关商品  */
.noproduct{
  width: 100%;
  height: 200rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.noproduct image{
  width: 150rpx;
  height: 150rpx;
  margin: 0 auto;
}
.noproduct text{
  font-size: 30rpx;
}
/*更多好卷  */
.moreCouponsText{
  height: 176rpx;
  background-color: #FE3D53; 
}
.moreCouponsText text{
 line-height: 175rpx;
 color: white;
 font-size: 50rpx;
}
</style>